import React from 'react'
import { connect } from 'react-redux'
import classNames from 'classnames/bind';
import Layout from '@/components/layout';
import styles from '../index.module.scss';
import {fetchDataApi} from '@/api';
import { bindActionCreators } from 'redux';
import {fetchData} from '../redux/actions';

const cx = classNames.bind(styles);

const mapStateToProps = state =>{
  return {
    data: state.indexState.data
  }
}

const mapDispatchToProps=(dispatch)=>{
  return bindActionCreators({
    fetchData
  }, dispatch)
}

@connect(mapStateToProps, mapDispatchToProps)
export default class Index extends React.Component {
  static async getInitialProps (props) {
      const ssrData = await fetchDataApi();
      return {
        current_user_url: ssrData.current_user_url + ' Hello world222'
      }
  }

  loadData=()=>{
    this.props.fetchData();
  }

  render() {
    const {data} = this.props;
    return (
      <Layout>
          <button onClick={this.loadData}>加载数据</button>{this.props.current_user_url}
          {data.isFetching && 'loading'}
          {Object.keys(data.data).length>0 && Object.values(data.data).map((item, index)=>{
            return <div key={index}>{item}</div>
          })}
      </Layout>
    )
  }
}
